/*
 * 聊天
 * @author Kevin
 * @date 2021/1/14 17:35
 */
var chat={
    ChatWebSocket:{
        /* 服务器地址 */
        serverAddress:"ws://" + window.location.hostname + ":2222/ws",
        /*
         * 自定义聊天协议
         *    ProtocolType:
         *     LOGIN:登录
         *     LOGOFF:注销
         *     CHAT:聊天
         *     SYSTEM:系统消息
         */
        protocolType:{login:"LOGIN",logoff:"LOGOFF",chat:"CHAT",system:"SYSTEM"},
        /* webSocket与服务器通讯对象 */
        webSocket:null,
        /* 当前登录用户名称 */
        loginName:null,
        /*
         * 初始化方法
         */
        init:function(){
            if(window.WebSocket){
                this.webSocket= new WebSocket(this.serverAddress);
                //接收消息回调事件
                this.webSocket.onmessage=function(e){
                    //消息写到页面
                    console.log(e.data);
                    chat.ChatMessage.messageWritePage(e.data);
                };
                //连接成功回调事件
                this.webSocket.onopen=function(e){
                     console.log("连接开启");
                };

                //关闭连接回调事件
                this.webSocket.onclose=function(e){
                    console.log("连接关闭");
                }

                //异常回调事件
                this.webSocket.onerror=function(e){
                console.log("异常信息-》"+e);
                }
            }else{
                alert("你的浏览器不支持WebSocket协议，请更换谷歌或火狐浏览器~~");
            }
        },
        /*
         * 发送消息
         * @param message 消息内容
         */
        send:function(ele){
            //判断连接是否打开
            if(this.webSocket.readyState===WebSocket.OPEN){
                //向服务器发送消息
                //var msg=document.getElementById("sendMessage").value;
                var msg=$(ele).parent().parent().find(".send-msg-text").html();
                // 消息为空则return
               // if(chatMessage.isEmpty(msg)) return;
                //var loginName=util.getUrlParam("loginName"); //url地址获取
               // var loginName=document.getElementById("loginName").value;
                var obj={};
                obj.message=msg;
                //obj.loginName=loginName;
                obj.protocolType=chat.ChatWebSocket.protocolType.chat;
                var sendContext=JSON.stringify(obj);
                this.webSocket.send(sendContext);
                // 清空消息框
                //chatMessage.clearMessageBox();
                //光标保持在发送消息内
                //chatMessage.setFocus();
            }else{
                alert("WebSocket连接没有建立成功!");
            }
        }
    },
    ChatMessage:{
        /*
         * 消息写到页面
         * @param responseMsg 服务端返回的消息信息
         */
        messageWritePage:function(responseMsg){
            //console.log(responseMsg);
            // 解析消息
            var msgObj=this.messageParser(responseMsg);
            // 消息转为html格式字符串
            var msgHtml=this.messageFormatHtml(msgObj);
            // 重置在线人数
           // chatMessage.resetTotal(msgObj);
            // 根据class名获取到消息内容容器，并把msgHtml追加到消息列表中
            var chatContentObj=document.getElementsByClassName("chat-body-content")[0];
            // 消息拼接，并把消息重新载入页面
            chatContentObj.innerHTML=chatContentObj.innerHTML+msgHtml;
            // 设置滚动条到最底部
           // chatMessage.setScrollBarBottom();
            // 未读消息提醒
          //  this.unreadMessageReminder(msgObj);
        },
         /*
         * 消息转为html格式字符串
         * @param responseMsg 消息对象
         * @return 拼装好的消息字符串
         */
        messageFormatHtml:function(msg){
            var _html='';
            // 自己上线不通知
            if(msg.protocolType==chat.ChatWebSocket.protocolType.system&&msg.loginName==chat.loginName) return _html;
            if(msg.protocolType==chat.ChatWebSocket.protocolType.system){
                _html+=' <div class="chat-system-info"><span class="msg">'+msg.message+'</span></div> ';
            }else{
                var msgTitleClass=chat.loginName==msg.loginName?"chat-msg-title-me":"chat-msg-title-other";
                _html+=' <ul class="chat-msg"> ';
                _html+='     <li class="'+msgTitleClass+'">';
                _html+='        <span class="chat-name">'+msg.loginName+'</span>';
                _html+='        <span class="chat-date">'+msg.date+'</span>';
                _html+='     </li>';
                _html+='     <li class="chat-msg-content">'+msg.message+'</li>';
                _html+=' </ul>';
            }
            return _html;
        },
        /*
         * 消息解析器
         * @param responseMsg 消息字符串
         * @return 消息对象
         */
        messageParser:function(responseMsg){
            return JSON.parse(responseMsg);
        }
    },
    ChatUtils:{
        /*
         * 获取当前页面最大z-index元素值
         */
        getMaxZIndex:function(){
            var maxZ=Math.max.apply(null,$.map($('body *'),function(e,n){
                if($(e).css('position')!='static'){
                    return parseInt($(e).css('z-index'))||-1;
                }
            }));
            return maxZ;
        },
        /*
         * 拖拽方法
         * @param dragElement 要拖拽的元素
         * @param moveTarget 真正移动的目标对象
         */
        drag:function(dragElement,moveTarget){
            // 鼠标按下标识
            var isMouseDown=false;
            // 元素左顶点与窗体左顶点距离值
            var left=0;
            // 元素顶点与窗体顶点距离值
            var top=0;
            // 鼠标按下X坐标值
            var mouseDownX=0;
            // 鼠标按下Y坐标值
            var mouseDownY=0;
            /* 监听元素区域鼠标按下事件 */
            dragElement.onmousedown=function(e){

                var zIndexMax=chat.ChatUtils.getMaxZIndex();
                var curZIndex=moveTarget.style.zIndex;
                //if(zIndexMax!=curZIndex){
                    moveTarget.style.zIndex=(zIndexMax+1);
               // }
                /*
                if(chat.ChatUtils.getMaxZIndex()!=moveTarget.style.zIndex){
                    moveTarget.style.zIndex=chat.ChatUtils.getMaxZIndex();
                }
                */


                dragElement.style.cursor="move";
                isMouseDown=true;
                // 获取x坐标和y坐标
                mouseDownX=e.clientX;
                mouseDownY=e.clientY;
                // 获取左部和顶部的偏移量
                left=moveTarget.offsetLeft;
                top=moveTarget.offsetTop;
            }
            /* 监听鼠标移动事件 */
            document.onmousemove=function(e){
                if(!isMouseDown) return;
                var newX=e.clientX;
                var newY=e.clientY;
                // 计算移动后的左偏移量和顶部的偏移量
                var newLeft = newX - (mouseDownX-left);
                var newTop = newY - (mouseDownY-top);
                moveTarget.style.left=newLeft+"px";
                moveTarget.style.top=newTop+"px";
            }
            /* 监听元素区域鼠标抬起事件 */
            dragElement.onmouseup=function(e){
                dragElement.style.cursor="default";
                isMouseDown=false;
            }
        },
        removeEle:function(ele){
            ele.remove();
        },
        addListenerPasteImg:function(ele){

            ele.addEventListener('paste',function(e){
                if(e.clipboardData){
                    for(var i=0;i<e.clipboardData.items.length;i++){
                        var c=e.clipboardData.items[i];
                        var f=c.getAsFile();

                        var reader=new FileReader();
                        reader.onload=function(e1){
                            ele.innerHTML+='<img src="' + e1.target.result + ' "onload="chat.ChatUtils.reSizePic(this);" onclick="chat.ChatUtils.viewPic(this)">&nbsp;';
                        }
                        reader.readAsDataURL(f);
                    }
                }
            });
        },
        reSizePic:function(thisPic){
            var rePicWidth = 200; //这里修改为您想显示的宽度值
            if(thisPic.getAttribute("c_height")) return;
            thisPic.setAttribute("c_height",thisPic.height);
            thisPic.setAttribute("c_width",thisPic.width);
             //============以下代码请勿修改==================================
            var trueWidth = thisPic.width;    //图片实际宽度
            var trueHeight = thisPic.height;  //图片实际高度
            var multiple = trueWidth / rePicWidth;  //图片缩小(放大)的倍数


            thisPic.width = rePicWidth;  //图片显示的可视宽度
            thisPic.height = trueHeight / multiple;  //图片显示的可视高度

        },
        viewPic:function(thisPic){
            var bodyHtmll=document.body.innerHTML;
            var html='';
            html+='<div class="view-img">';
            html+='<div class="view-img-overlay"></div>';
            html+='<div class="view-img-content"><img src="'+thisPic.getAttribute("src")+'" width="'+thisPic.getAttribute("c_width")+'" height="'+thisPic.getAttribute("c_height")+'" /><b class="view-img-close">X<b></div>';
            html+='</div>';
            $("body").append(html);
            this.closeViewPic();

        },
        closeViewPic:function(){
            $(".view-img-close").click(function(){
                $(".view-img").remove();
            });
        }

    },
    ChatWin:{
        newWin:function(){

        },
        closeChatWin:function(ele){
            var ele=$(ele).parents('div[class="chat-container"]')[0];
            chat.ChatUtils.removeEle(ele);
        },
        newChatWin(ele){
            var html=document.body.innerHTML;
            var _html='';
            var userid=ele.getAttribute("userid");
            _html+='<!-- 聊天窗口 start -->                                                                              ';
            _html+='<div class="chat-container" id="chat_'+userid+'">                                                                         ';
            _html+='    <!-- 头部 -->                                                                                    ';
            _html+='    <div class="chat-head">                                                                          ';
            _html+='        <div class="chat-head-title"><span>XXXXX</span><span id="total">0</span>';
            _html+='            <span class="close" onclick="chat.ChatWin.closeChatWin(this);">X</span>                                  ';
            _html+='        </div>                                                                                       ';
            _html+='    </div>                                                                                           ';
            _html+='    <!-- 消息主体 -->                                                                                ';
            _html+='    <div class="chat-body">                                                                          ';
            _html+='        <div class="chat-body-content">                                                              ';
            _html+='        </div>                                                                                       ';
            _html+='    </div>                                                                                           ';
            _html+='    <!-- 底部 -->                                                                                    ';
            _html+='    <div class="chat-foot no-select">                                                                ';
            _html+='        <div class="chat-foot-head-tools">                                                           ';
            _html+='            <i class="fa fa-bold"></i>                                                               ';
            _html+='            <i class="fa fa-italic"></i>                                                             ';
            _html+='            <i class="fa fa-underline"></i>                                                          ';
            _html+='        </div>                                                                                       ';
            _html+='        <div class="chat-foot-text">                                                                 ';
            _html+='            <div class="send-msg-text" id="sendMessage" contenteditable="true"></div>                             ';
            _html+='        </div>                                                                                       ';
            _html+='        <div class="chat-foot-bottom-tools">                                                         ';
            _html+='            <button class="send" onclick="chat.ChatWebSocket.send(this)">发送</button>                                 ';
            _html+='        </div>                                                                                       ';
            _html+='    </div>                                                                                           ';
            _html+='    <!-- 拖动改变窗口大小组件 -->                                                                    ';
            _html+='    <div class="chat-resize-bottom-right"></div>                                                     ';
            _html+='    <!-- 登录名 -->                                                                                  ';
            _html+='    <input type="hidden" id="loginName" name="loginName" value="${loginName!}">                      ';
            _html+='</div>                                                                                               ';
            _html+='<!-- 聊天窗口 end -->                                                                                ';
            document.body.innerHTML=html+_html;
            var e=document.getElementById("sendMessage");
            chat.ChatUtils.addListenerPasteImg(e);
        }
    }
};





